<!DOCTYPE html5>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>index</title>
	
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/vendor/jquery-ui-1.10.3.custom.css" />
		
		<link rel="stylesheet" id="viz-css" />
		
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>

	<body>
		<div id="main-canvas">
			<div id="interface">
				<div id="viz-wrapper">
					<div id="accordion">
						<h3>Atmosphere</h3>
						<div id="atmosphere"></div>						

						<h3>Temperature (Celsius)</h3>
						<div id="temperature"></div>	
												
						<h3>Mean Distance From Sun (km x 10<sup>6</sup>)</h3>
						<div id="distance-from-sun"></div>																												
					</div>	
				</div>
			</div>
		</div>
		
		<script src="js/vendor/jquery-2.0.3.min.js"></script>
		<script src="js/vendor/jquery-ui-1.10.3.custom.js"></script>
		<script src="js/vendor/three.js"></script>	
		<script src="js/vendor/OrbitControls.js"></script>
		<script src="js/vendor/stats.min.js"></script>
		<script src="js/vendor/THREEx.WindowResize.js"></script>
		<script src="js/vendor/tween.min.js"></script>
		<script src="js/vendor/d3.v3.js"></script>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		
		<script src="js/gl.js"></script>
		<script src="js/ui.js"></script>
		<script src="js/charts.js"></script>
		<!--<script src="js/viz.js"></script>-->
		<script>
			// load planet data
			// reference: http://stackoverflow.com/questions/2765411/is-it-possible-to-set-asyncfalse-to-getjson-call
			var planetData;
			$.ajax({
				url: "json/planetData.json",
				dataType: "json",
				async: false,
				success: function(data) {
					planetData = data;
					console.log("planetary data loaded");

					// load Google charts lib
					google.load("visualization", "1", {packages:["corechart", "geochart"]});
					google.setOnLoadCallback(function() {
						initUI();
						initGL();						
					});
				},
				error: function(jqXHR, textStatus, errorThrown) {
					console.log("error loading json: " + errorThrown);
				}
			});
			
			//initD3();
			//initCharts();
		</script>
	</body>
</html>
